<template>
  <view class="comp__fail-tips">
    <image
      class="comp__fail-tips-img"
      src="https://picture-1256514897.file.myqcloud.com/book/codes/error.png"
      mode="scaleToFill"
      alt="出错了"
    />
    <view class="comp__fail-tips-text">{{ text }}</view>
    <view class="comp__fail-tips-btns">
      <button
        v-if="confirmText"
        class="common-btn"
        @click="handleClick('confirm')"
      >{{ confirmText }}</button>
      <button
        v-if="cancelText"
        class="common-btn cancel"
        @click="handleClick('cancel')"
      >{{ cancelText }}</button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'fail-tips',

  props: {
    text: {
      type: String,
      default: '服务器开小差了，请稍后重试'
    },
    showConfirmBtn: {
      type: Boolean,
      default: true
    },
    confirmText: {
      type: String,
      default: '确认'
    },
    showCancelBtn: {
      type: Boolean,
      default: true
    },
    cancelText: {
      type: String,
      default: '取消'
    }
  },

  methods: {
    handleClick(type) {
      this.$emit(type);
    }
  }
};
</script>

<style lang="scss">
.comp__fail-tips {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;

  &-img {
    width: 200rpx;
    height: 200rpx;
  }

  &-text {
    font-size: 28rpx;
    margin-top: 20rpx;
    text-align: center;
  }
}
</style>
